<template>
  <uni-page-wrapper>
    <uni-page-body>
      <uni-popup ref="popup" type="dialog" >
        <uni-popup-dialog
          type="info"
          :title="popupTitle"
          :before-close="true"
          @close="close"
          @confirm="confirm"
        >
          <!-- <input type="text" /> -->
        </uni-popup-dialog>
      </uni-popup>
      <uni-popup ref="popup1" type="dialog" >
        <uni-popup-dialog
          type="info"
          :title="popup1Title"
          :before-close="true"
          @close="close"
          @confirm="confirm1"
        >
          <!-- <input type="text" /> -->
        </uni-popup-dialog>
      </uni-popup>

      <uni-view class="paddingView">
        <uni-view class="header">
          <uni-view class="box">
            <uni-view class="mask">
              <uni-view class="ul">
                <uni-view class="li" v-for="item in list" :key="item">
                  <uni-image class="icon">
                    <div
                      style="
                        background-image: url('/static/img/que.fea46d86.png');
                        background-position: 0% 0%;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                      "
                    ></div>
                    <img src="/static/img/que.fea46d86.png" />
                  </uni-image>
                </uni-view>
              </uni-view>
              <uni-view class="ul">
                <uni-view class="li" v-for="item in list" :key="item">
                  <uni-image class="icon">
                    <div
                      style="
                        background-image: url('/static/img/que.fea46d86.png');
                        background-position: 0% 0%;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                      "
                    ></div>
                    <img src="/static/img/que.fea46d86.png" />
                  </uni-image>
                </uni-view>
              </uni-view>
              <uni-view class="ul">
                <uni-view class="li" v-for="item in list" :key="item">
                  <uni-image class="icon">
                    <div
                      style="
                        background-image: url('/static/img/que.fea46d86.png');
                        background-position: 0% 0%;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                      "
                    ></div>
                    <img src="/static/img/que.fea46d86.png" />
                  </uni-image>
                </uni-view>
              </uni-view>
            </uni-view>
          </uni-view>
        </uni-view>
        <uni-view class="qdBtn" @click="clickButton">{{$t('task.Click')}}</uni-view>
        <uni-view class="moneyView">
          <uni-view class="item">
            <uni-view class="it">
              <uni-view class="tit">{{$t('task.Level')}}</uni-view>
              <uni-view class="bot mar">{{ level }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="it">
              <uni-view class="tit">{{$t('task.Balance')}}</uni-view>
              <uni-view class="bot mar">{{ balance }} </uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="it">
              <uni-view class="tit">{{$t('task.Number of tasks')}}</uni-view>
              <uni-view class="bot mar"> {{ taskNumber }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="item">
            <uni-view class="it">
              <uni-view class="tit">{{$t('task.Number of Clicks')}}</uni-view>
              <uni-view class="bot mar"> {{ clickNumber }}</uni-view>
            </uni-view>
          </uni-view>
        </uni-view>
        <uni-view class="unLock">
          <uni-view class="l">{{$t('task.Unlock')}}</uni-view>
          <uni-view class="r"
            >{{$t('task.Get more commissions for the next level of exclusive channels')}}</uni-view
          >
        </uni-view>
        <uni-view class="qdSm">{{$t('task.Order description')}}</uni-view>
        <uni-view class="list">
          <uni-view class="item"
            >1: {{$t('task.Your current level can only do')}} {{taskNumber-clickNumber}} {{$t('task.times of task in one')}}
            {{$t('task.day')}}</uni-view
          >
          <uni-view class="item"
            >2: {{$t("task.The system is based on LBS technology and can automatically")}}
            {{$t("task.match goods by the Cloud algorithm every time, dont worry about")}}
            {{$t("task.missing the matching")}}</uni-view
          >
          <uni-view class="item"
            >3: {{$t('task.We have set up a system in order to prevent to abuse of')}}
            {{$t('task.clicking; If you have a pending order, you will not be able to do')}}
            {{$t('task.the next task')}}.</uni-view
          >
        </uni-view>

        <uni-view class="maskView" v-if="isShowMask">
          <uni-view class="bigBg">
            <uni-image class="success">
              <div
                style="
                  background-image: url('/static/img/success.d16bff41.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              ></div>
              <img src="/static/img/success.d16bff41.png" />
              <!---->
            </uni-image>
            <uni-view class="title">{{$t('task.Match successfully')}}</uni-view>
            <uni-view class="whiteBox">
              <uni-view class="msg">{{$t('task.time')}}：{{ time }}</uni-view>
              <uni-view class="msg">{{$t('task.Numbering')}}：{{ numbering }}</uni-view>
              <uni-view class="commodity">
				  <image :src="image" class="icon"></image>
                  <!---->
                </uni-image>
                <uni-view class="right">
                  <uni-view class="tit">{{ productName }}</uni-view>
                  <uni-view class="bottom"> </uni-view>
                </uni-view>
              </uni-view>
              <uni-view class="msg2">
                <uni-view class="l">{{$t('task.order amount')}}</uni-view>
                <uni-view class="r">{{ orderAmount }}</uni-view>
              </uni-view>
              <uni-view class="msg2">
                <uni-view class="l">{{$t('task.commission')}}</uni-view>
                <uni-view class="r">{{ commission }}</uni-view>
              </uni-view>
              <uni-view class="msg2">
                <uni-view class="l">{{$t('task.Expected return')}}</uni-view>
                <uni-view class="r yellow">{{ expectedReturn }}</uni-view>
              </uni-view>
            </uni-view>
            <uni-view class="btns">
              <uni-view class="item l" @click="cancel">{{$t('task.cancel')}}</uni-view>
              <uni-view class="item r" @click="submit">{{$t('task.Submit now')}}</uni-view>
            </uni-view>
          </uni-view>
        </uni-view>
      </uni-view>
    </uni-page-body>
  </uni-page-wrapper>
</template>

<script>
import service from "@/store/service.js";

import uniPopup from "../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../components/uni-popup-dialog/uni-popup-dialog";
export default {
  components: { uniPopup, uniPopupDialog },
  data() {
    return {
      timer: null,
      startTranslateYHeight: 0,
      list: 19,
      image: "",
      popupTitle: this.$t('task.Confirm to Click?'),
      popup1Title: this.$t('task.Are you sure to submit now?'),
      level: "",
      balance: "",
      taskNumber: "",
      clickNumber: "",
      id: "",
      isShowMask: false,
      time: "time：2021-02-10 00:17:13",
      numbering: "Numbering：JP202102100017138844",
      productName: `Nokia 5.3 Android One Smartphone with Quad Camera, 6 GB RAM
                    and 64 GB Storage - Charcoal`,
      orderAmount: "12498.000",
      commission: "31.245",
      expectedReturn: "12529.245",
	  issub:false
    };
  },
  onShow() {
	  this.loadData()
  },
  methods: {
	  loadData(){
		  service.auth(
		    this,
		    service.api.app_getinfo,
		    {
		      level: uni.getStorageSync("level"),
		    },
		    function (self, res) {
		      self.level = res.vip;
		      self.balance = res.money;
		      self.taskNumber = res.count;
		      self.clickNumber = res.today_count;
		    }
		  );  
	  },
    changeToEng(){
      const temp = document.querySelectorAll(".uni-dialog-button-text");
      temp[0].innerHTML = "cancle";
      temp[1].innerHTML = "confirm";

    },
    clickButton() {
      this.$refs.popup.open();
      //不是弹窗一开，dom就加载好了，需要一小段时间
      // setTimeout(() => {
      //   this.changeToEng()
      // }, 80);
    },
    playGame(type) {
      const firstImagesList = document.getElementsByClassName("ul")[0];
      const secondsImagesList = document.getElementsByClassName("ul")[1];
      const thirdImagesList = document.getElementsByClassName("ul")[2];
      if (type === undefined) {
        if (this.startTranslateYHeight > -820) {
          this.startTranslateYHeight -= 50;
        }
      } else {
        this.startTranslateYHeight = 0;
      }
      firstImagesList.style.transform = `translateY(${this.startTranslateYHeight}px)`;
      secondsImagesList.style.transform = `translateY(${this.startTranslateYHeight}px)`;
      thirdImagesList.style.transform = `translateY(${this.startTranslateYHeight}px)`;
    },
    close(done) {
      done();
    },
    confirm(done, value) {
      //调click的接口

      var that = this;
      uni.showLoading();
      service.auth(
        that,
        service.api.app_start,
        {
          level: uni.getStorageSync("level"),
        },
        function (self, res) {
          self.image = res.image;
          self.commission = res.commission;
          self.expectedReturn = res.return;
          self.orderAmount = res.money;
          self.productName = res.title;
          self.time = res.time;
          self.numbering = res.orid;
          self.id = res.id;
          that.timer = setInterval(() => {
            that.playGame();
          }, 100);
          setTimeout(() => {
            uni.hideLoading();
            that.isShowMask = true;
            that.playGame("init");
            clearInterval(that.timer);
          }, 2000);
        }
      );

      done();
    },
    cancel() {
      this.isShowMask = false;
    },
    submit() {
      this.$refs.popup1.open();
    },
    confirm1() {
		if(this.issub){
			return;
		}
		this.issub=true
	  //调接口
	  service.auth(
		this,
		service.api.app_settlement,
		{
		  id: this.id,
		},
		function (self, res) {
			self.issub = false
		  self.isShowMask = false;
			self.$refs.popup1.close();
			self.loadData()
		}
	  );
    },
  },
};
</script>

<style>
@import url(./task.css);
</style>